import React, { CSSProperties } from "react";

interface Props {
    header?: React.ReactNode,
    footer?: React.ReactNode,
    bodyStyle?: CSSProperties,
    bodyClass?: string,
    shadow?: 'always' | 'never' | 'hover',
    children?: React.ReactNode
}

const Card = ({ header, footer, bodyStyle, bodyClass, shadow = "always", children }: Props) => {
    const getClass = () => {
        if (shadow === "always") {
            return "pe-card-always"
        } else if (shadow === "hover") {
            return "pe-card-hover"
        }
        return ""
    }

    return (
        <div className={["pe-card", bodyClass, getClass()].join(" ").trim()} style={bodyStyle}>
            {
                header || header === 0 ? (
                    <div className="pe-card-header">
                        {header}
                    </div>
                ) : null
            }
            <div className="pe-card-content">
                {children}
            </div>
            {
                footer || footer === 0 ? (
                    <div className="pe-card-footer">
                        {footer}
                    </div>
                ) : null
            }
        </div>
    )
}

export default Card